<template>
	<view>
		<view class="shoucizixun-width">
			<view class="start-center">
				<image class="img-zixun" src="/static/images/imgs/online-shoucizixun.png"></image>
				<view class="shoucizixun-title">首次咨询</view>
				<view class="shoucizixun-money">￥{{doctorItem.moneyFirst}}/次</view>
			</view>
			<view class="btn-shoucizixun" @click="toPage('first')">开始咨询</view>
		</view>
		<view class=" bg-white pad-10">
			<view class="flex-start">
				<view class="group-title">
					<view>
						<view class="group-name">在线复诊</view>
						<view class="center">
							<view class="group-bg"></view>
						</view>
					</view>
				</view>
				<view class="color-red">(需要开处方患者请选择此类型)</view>
			</view>
			<view class="between-center text-center">
				<view class=" mar-10-0 twwz fuzhen">
					<view class="bottom-0">
						<view>图文问诊</view>
						<view class="fuzhen-money">￥{{doctorItem.moneyImg}}/次</view>
						<view class="btn-img btn-fuzhen" @click="toPage('img')">开始问诊</view>
					</view>
				</view>
				<view class=" mar-10-0 yywz fuzhen">
					<view class="bottom-0">
						<view>语音问诊</view>
						<view class="fuzhen-money">￥{{doctorItem.moneyVoice}}/次</view>
						<view class="btn-voice btn-fuzhen" @click="toPage('voice')">开始问诊</view>
					</view>
				</view>
				<view class="mar-10-0 spwz fuzhen">
					<view class="bottom-0">
						<view>视频问诊</view>
						<view class="fuzhen-money">￥{{doctorItem.moneyVideo}}/次</view>
						<view class="btn-video btn-fuzhen" @click="toPage('video')">开始问诊</view>
					</view>
				</view>
			</view>
		</view>
		<view class="shoucizixun-width">
			<view class="start-center">
				<image class="img-zixun" src="/static/images/imgs/online-yongyaoizxun.png"></image>
				<view class="shoucizixun-title">用药咨询</view>
				<view class="shoucizixun-money">￥{{doctorItem.moneyMedic}}/次</view>
			</view>
			<view class="btn-shoucizixun" @click="toPage('medic')">开始咨询</view>
		</view>

		<view class=" bg-white pad-10" v-if="count>0">
			<view class="between">
				<view class="group-title">
					<view>
						<view class="group-name">问诊评价</view>
						<view class="center">
							<view class="group-bg"></view>
						</view>
					</view>
				</view>
				<view>共{{count}}条评价</view>
			</view>
			<view class="pad-0-10">
				<view v-for="item in listEvaluate">
					<view class="mar-10-0 border-bottom">
						<view class="flex-start center">
							<image class="img-pinjia" v-if="item.patHeadImg" :src="hostApi+item.patHeadImg"></image>
							<image class="img-pinjia" v-else src="/static/images/光华/刘洋.png"></image>
							<view class="mar-0-5 over">
								<view class="between center">
									<view>{{item.patName}}</view>
									<view class="flex-start">
										<u-rate :current="item.fraction"></u-rate>
										<!-- <view class="mar-0-5">{{item.fraction}}</view> -->
									</view>
								</view>
								<view>{{item.createTime}}</view>
							</view>
						</view>
						<view>
							<u-parse class="content" :html="item.describe"></u-parse>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import {
		selectDoctorEvaluate
	} from '../../api/doctorEvaluate';
	import {
		listBadWords
	} from '../../utils/listBadWords';
	export default {
		props: {
			doctorItem: Object
		},
		data() {
			return {
				content: "专业知识丰富，认真细致，讲解详细，病情已好，非常感谢肖医生!",
				doctorCode: '',
				listEvaluate: [], //评价列表
				count: 0, //共有多少条评价
			}
		},
		computed: {
			...mapGetters(['hostApi'])
		},
		mounted() {
			this.init();
		},
		methods: {
			init() {

				selectDoctorEvaluate({
					doctorCode: this.doctorItem.code,
					status: 1,
					orderBy: "create_time desc"
				}).then(res => {
					let list = res.data;
					list.forEach(item => {
						for (var i = 0; i < listBadWords.length; i++) {
							if (item.describe) {
								item.describe = item.describe.replaceAll(listBadWords[i], "**");
							}
						}
					})
					this.listEvaluate = list;
					this.count = res.count;
				})
			},
			toPage(type) {
				if (type == 'voice' || type == 'video') {
					// 在线语音视频预约时间
					let item = {
						status: 'active',
						id: 'msg-1'
					}
					uni.navigateTo({
						url: `/pages/Messages/chat??status=${item.status}&id=${item.id}`
					})
				} else {
					// 病情描述，等于在线留言
					uni.navigateTo({
						url: '/pages/onlineConsultation/diseaseDescription'
					})
				}

			}
		}
	}
</script>

<style scoped>
	.title-border {
		padding: 0 5px;
		border-left: 3px solid blue;
	}

	.img-pinjia {
		width: 30px;
		height: 30px;
		border-radius: 30px;
	}

	.content {
		color: rgb(110, 114, 120);
	}

	.border-bottom {
		border-bottom: 1px solid rgb(212, 220, 231);
		padding: 10px 0;
	}

	.shoucizixun-width {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 16px;
	}

	.fuzhen {
		background-repeat: no-repeat;
		background-size: 100% 100%;
		height: 120px;
		width: 102px;
		position: relative;
		display: flex;
		justify-content: center;
		padding: 5px 0;
	}

	.twwz {
		background-image: url("/static/images/imgs/online-tuwenwenzhen.png");
	}

	.yywz {
		background-image: url("/static/images/imgs/online-yuyinwenzhen.png");
	}

	.spwz {
		background-image: url("/static/images/imgs/online-shipinwenzhen.png");
	}

	.img-zixun {
		width: 30px;
		height: 30px;
	}

	.shoucizixun-title {
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: 400;
		font-size: 16px;
		color: #333333;
		line-height: 15px;
		text-align: left;
		font-style: normal;
		text-transform: none;
		margin: 0 5px;
	}

	.shoucizixun-money {
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: 400;
		font-size: 11px;
		color: #EA0000;
		line-height: 15px;
		text-align: right;
		font-style: normal;
		text-transform: none;
	}

	.btn-shoucizixun {
		background-color: rgb(115, 224, 230);
		color: white;
		border-radius: 30px;
		padding: 5px 10px;
	}

	.fuzhen-money {
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: 400;
		font-size: 10px;
		color: #EA0000;
		line-height: 13px;
		text-align: center;
		font-style: normal;
		text-transform: none;
		margin: 5px 0;
	}

	.btn-fuzhen {
		color: white;
		border-radius: 30px;
		padding: 5px 10px;
		font-size: 10px;
	}

	.btn-img {
		background-color: rgb(80, 164, 255);

	}

	.btn-voice {
		background-color: rgb(249, 141, 174);
	}

	.btn-video {
		background-color: rgb(248, 154, 83);
	}

	.bottom-0 {
		position: absolute;
		bottom: 5px;
	}
</style>